contentMargins#

The contentMargins modifier configures custom margins around a view’s content. This allows precise control over layout spacing, particularly in scrollable containers such as ScrollView, List, or Form. You can apply margins uniformly or selectively to certain edges and placement contexts.

Type#

1contentMargins?: 
2  | number
3  | EdgeInsets
4  | {
5      edges?: EdgeSet
6      insets: number | EdgeInsets
7      placement?: ContentMarginPlacement
8    }

Parameters#

insets (required)#

Defines the margin values to apply. You can provide:

• A single number (applied to all specified edges)
• An EdgeInsets object for per-edge customization

Example – uniform insets:#

1<ScrollView
2  contentMargins={20}
3>
4  <Text>Applies 20 points of margin on all sides</Text>
5</ScrollView>

Example – edge-specific insets:#

1<ScrollView
2  contentMargins={{
3    top: 10,
4    bottom: 30,
5    leading: 16,
6    trailing: 16
7  }}
8>
9  <Text>Custom edge insets</Text>
10</ScrollView>

edges (optional)#

Defines which edges the insets should apply to. If omitted, all edges are used.

Type#

1type EdgeSet = "top" | "bottom" | "leading" | "trailing" | "vertical" | "horizontal" | "all"

Example – apply to top and bottom only:#

1<ScrollView
2  contentMargins={{
3    edges: "vertical",
4    insets: 12
5  }}
6>
7  <Text>Vertical-only margins</Text>
8</ScrollView>

placement (optional)#

Specifies where in the layout the margins should be applied. This is especially relevant in scrollable views that have both scrollable content and indicators.

Type#

1type ContentMarginPlacement = "automatic" | "scrollContent" | "scrollIndicators"

Options#

Example – margin applied only to scrollable content:#

1<ScrollView
2  contentMargins={{
3    insets: 24,
4    placement: "scrollContent"
5  }}
6>
7  <Text>Scroll content margins only</Text>
8</ScrollView>

Full Configuration Example#

1<ScrollView
2  contentMargins={{
3    edges: "horizontal",
4    insets: { leading: 20, trailing: 20, top: 0, bottom: 0 },
5    placement: "scrollContent"
6  }}
7>
8  <VStack spacing={10}>
9    <Text>Margin is applied only to horizontal scroll content area</Text>
10  </VStack>
11</ScrollView>

Summary#